<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chatDemo</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #messageBox {
            overflow: auto
        }

        .message {
            background: aquamarine;
            color: black;
            margin: 1rem 2rem;
            padding: 1rem;
            scroll-padding-left: 1px;
        }

        #userEdit {
            border-top: 1px solid #33cc01;
            width: 100%;
            background: rgba(194, 154, 163, 0.21);
            position: absolute;
            bottom: 0;
        }

        #userEdit #input {
            width: 80%;
            font-size: 2rem;
            border: none;
            display: block;
            height: 4rem;
            float: left;
        }

        #userEdit input[type=button] {
            float: right;
            border: none;
            background: #33cc01;
            width: 20%;
            font-size: 2rem;
            height: 4rem;
            vertical-align: text-bottom;
        }
    </style>
</head>
<body>
<div id="messageBox">

</div>
<div id="userEdit">
    <textarea type="text" id="input" autofocus></textarea>
    <input type="button" value="发送" id="send" >
</div>
</body>
<script>
    $(function () {
        chat = new WebSocket("ws://127.0.0.1:3000/");
        if (chat.readyState == 1) {
            console.log("已成功建立连接");
        }
        chat.onmessage = function (event) {
            if ($.parseJSON(event.data).type == 'register') {
                $("#messageBox").append("<div class='message'>REGISTER:" + $.parseJSON(event.data).message + "</div>");
                    // $msg = new Object();
                    // $msg.type = 'getUsers';
                    // $msg.time = ((new Date()).valueOf());
                    // chat.send(JSON.stringify($msg));
            } else if($.parseJSON(event.data).type == 'users'){
                str = "";
                for(i in $.parseJSON(event.data).data){
                    str+=$.parseJSON(event.data).data[i].name+',';
                }
                $("#messageBox").append("<div class='message'>当前在线:"+ str+"</div>");
            }else {
                $("#messageBox").append("<div class='message'>" + $.parseJSON(event.data).message.toString() + "</div>");
            }
        };
        chat.onopen = function (event) {
            $msg = new Object();
            $msg.type = 'register';
            $msg.time = ((new Date()).valueOf());
            $msg.token = 'aa3ca19ddb674f07a213af365058188e';
            chat.send(JSON.stringify($msg));
            $msg = new Object();
            $msg.type = 'getUsers';
            $msg.time = ((new Date()).valueOf());
            chat.send(JSON.stringify($msg));

        };
        $("#send").click(function () {

            $msg = new Object();
            $msg.type = 'group';
            $msg.time = ((new Date()).valueOf());
            $msg.message = $("#input").val();
            console.log(JSON.stringify($msg).length);
            chat.send(JSON.stringify($msg));
            $("#input").val("");
        });
        $("#messageBox").css('height', $(window).height());
        $("#input").keydown(function() {//给输入框绑定按键事件
            if(event.keyCode == "13") {//判断如果按下的是回车键则执行下面的代码
                $("#send").click();
                $(this).val('');
                return;
            }
        });
    })

</script>

</html>